<template>
  <up-datetime-picker
    :show="props.showTimeVal"
    v-model="props.timeVal"
    :mode="props.timeMode"
    closeOnClickOverlay
    @close="handleClose"
    @confirm="handleConfirm"
    @cancel="handleClose"
    :maxDate="maxDateTimeVal"
    :cancelText="t('time.cancel')"
    :confirmText="t('time.confirm')"
  ></up-datetime-picker>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const maxDateTimeVal = ref(Date.now());
const props = defineProps({
  timeVal: {
    type: Number,
    default: Date.now(),
  },
  showTimeVal: {
    type: Boolean,
    default: true,
  },
  timeMode: {
    type: String,
    default: "datetime",
  },
});
const emit = defineEmits(["handleTimeClose", "handleTimeConfirm"]);

const handleClose = () => {
  emit("handleTimeClose");
};

const handleConfirm = (e) => {
  emit("handleTimeConfirm", e.value);
  emit("handleTimeClose");
};
</script>

<style lang="scss" scoped>
:deep(.uni-picker-view-mask) {
  background-image: none;
}

:deep(.u-picker__view__column__item) {
  color: #aeaeae;
}
:deep(.u-picker__view__column__item--selected) {
  color: #fff;
}
</style>
